import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/utils/ThemeConfig.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///基础角标
class BaseBadges extends StatefulWidget {
  ///图标或图文组件
  final Widget child;

  ///角标背景颜色
  final Color bgColor;

  ///文本颜色
  final Color txtColor;

  ///角标数量
  final int num;

  ///角标样式
  final BadgesStyle badgesStyle;

  ///徽标y轴偏移距离(为负数)
  final double translateY;

  ///徽标x轴偏移距离(为负数);
  final double translateX;

  const BaseBadges({super.key, required this.child, this.bgColor = Colors.white, this.num = 0, this.badgesStyle = BadgesStyle.noBorder, this.translateY = -10, this.translateX = -10, this.txtColor = ThemeConfig.themeColor});

  @override
  State<StatefulWidget> createState() {
    return _BasePageState();
  }
}

class _BasePageState extends State<BaseBadges> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none, // 允许角标超出边界
      children: [
        widget.child,
        if (widget.num > 0)
          Positioned(
            right: widget.translateX, // 设置角标相对于 child 的偏移
            top: widget.translateY,
            child: Container(
              width: 16.w,
              height: 16.w,
              alignment: Alignment.center,
              padding: EdgeInsets.all(1.w),
              decoration: BoxDecoration(
                color: widget.bgColor,
                borderRadius: const BorderRadius.all(Radius.circular(20)),
                border: _getBorderStyle(),
              ),
              child: Text(
                '${widget.num}',
                style: setTextStyle(10, FontWeight.w300, widget.txtColor),
              ),
            ),
          ),
      ],
    );
  }

  ///获取边框样式
  BoxBorder _getBorderStyle() {
    switch (widget.badgesStyle) {
      case BadgesStyle.noBorder:
        return const Border();
      case BadgesStyle.hasBorder:
        return Border.all(color: ThemeConfig.themeColor);
    }
  }
}

///角标样式
enum BadgesStyle {
  ///无边框
  noBorder,

  ///有边框
  hasBorder
}
